<template>
    <div>
        <eagle-form ref="eagleForm" :model="form" @submitForm="onSubmit">
            <eagle-input v-model="form.HarmName" label="名称" name="HarmName" placeholder="名称"  required></eagle-input>
            <eagle-input v-model="form.Address" label="地址" name="Address" placeholder="地址" :rules="[{required: true, message: '请输入地址'}]" required></eagle-input>
            <!-- <eagle-checkgroup v-model="form.Harm" name="Harm" :dataSource="HarmList" label="标题" :option="{label:'Name',value:'ID'}" direction="horizontal" :rules="[{required: true, message: '请选择'}]" required @change="myChange"></eagle-checkgroup> -->

          <eagle-checkgroup name="Harm" v-model="form.harmArr" :dataSource="HarmList" label="伤害/职业病" :option="{label:'Name',value:'ID'}" direction="horizontal" @change="change"></eagle-checkgroup>

            <!-- <van-field class="input_text" name="checkboxGroup" label="伤害/职业病" required>
                <template #input>
                    <van-checkbox-group v-model="form.HarmValue" direction="horizontal" @change="harmChange">
                        <van-checkbox :name="item.ID" shape="square" v-for="(item, index) in HarmList" :key="index">{{ item.Name }}</van-checkbox>
                    </van-checkbox-group>
                </template>
            </van-field> -->
            <eagle-switch name="Switch" label="开关" v-model="form.Switch"></eagle-switch>
            <van-field
                class="input_text"
                v-model="form.CheckTypeName"
                label="检查类型"
                placeholder="请选择"
                required
                readonly
                @click="checkTypeName()"
            />
            <eagle-stepper v-model="form.Advance" name="Advance" label="提前生成" postfix="天"></eagle-stepper>
            <eagle-radio-group
              name="HarmRadio"
              v-model="form.HarmRadio"
              label="radio测试"
              direction="horizontal"
              :dataSource="HarmList"
            ></eagle-radio-group>
            <div class="bottom-btns">
              <eagle-button type="primary" class="submit-two" @click="save(false)">
                暂存
              </eagle-button>
              <eagle-button type="info" class="submit-two" @click="save(true)">
                提交
              </eagle-button>
            </div>
        </eagle-form>
        <eagle-dialog :show.sync="show" @close="close" ref="myDialog" title="我的弹框" @confirm="confirm" />
    </div>
</template>
<script>
import eagleButton from '../../components/eagle/eagle-button.vue';
import EagleRadioGroup from '../../components/eagle/eagle-radio-group.vue';
export default {
  components: { eagleButton, EagleRadioGroup },
  data() {
    return {
      form: {
        HarmName: "",
        Advance:3,
        HarmValue:"",
        Harm:"1,2",
        harmArr:["1","2"],
        HarmRadio:"3"
      },
      HarmList: [],
      url: "",
      show: false,
      result: ['ck'],
      isSubmit:false,
    };
  },
  created() {
    
    for (var i = 0; i < 8; i++) {
      i;
      this.HarmList.push({
        ID: i.toString(),
        Name: "伤害类型" + i,
      });
    }
    this.form.HarmValue = ["1","2"];
    this.harmArr=["1","2"]
  },
  methods: {
    save(isSubmit){
      this.isSubmit = isSubmit;
    },
    onSubmit() {
      if(this.isSubmit){
        console.log("调用提交方法");
      }else{
        console.log("调用暂存方法");
      }
    },
    // 选择检查类型
    checkTypeName() {
      this.show = true;
    },
    close(){
        this.$refs.myDialog.close();
    },
    confirm(){
        this.$refs.myDialog.close();
    },
    myChange(val){
      alert(val)
    },
    harmChange() {
      
      this.form.Harm = this.harmArr.join();
    },
    onChangeGroup(event){
      
      this.result = event.mp.detail
    },
    change(val){
      
    }
  },
};
</script>
<style lang="less" scoped>
.bottom-btns {
  margin-top: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .submit-btn {
    width: 30%;
    height: 30px;
    font-size: 12px;
  }
  .submit-only {
    width: 100%;
    height: 30px;
    font-size: 12px;
  }
  .submit-two {
    width: 48%;
    height: 30px;
    font-size: 12px;
  }
}
</style>